<template>
  <div class="list">
    <div class="listBox">
      <img src="../../public/oppoShop.png" alt="" style="width: 250px;height: 50px;">
      <div class="listBox_change">
        <a href="" v-for="(item,index) in list" :key="index">{{ item.name }}</a>
      </div>
      <el-input v-model="input" type="text" placeholder="OPPO Reno14" placeholder-style="font-size: 14px"  />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
const list = reactive([
  {
    name: "OPPO专区",
  },
  {
    name: "一加专区",
  },
  {
    name: "智能硬件",
  },
  {
    name: "服务",
  },
]);
const input = ref("");
</script>
<style lang="scss" scoped>
.list {
  width: 100%;
  height: 84px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  .listBox {
    max-width: 1312px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .listBox_change {
      display: flex;
      align-items: center;
      max-width: 540px;
      min-width: 560px;
      margin: 0 60px 0 30px;
      justify-content: space-between;
      a {
        font-size: 14px;
        list-style: none;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        font-weight: 500;
        cursor: pointer;
        max-width: 112px;
        color: #333;
      }
    }
    ::v-deep .el-input {
      width: 160px;
      border: 0;
    }
    ::v-deep .el-input__wrapper {
      font-size: 14px;
      width: 160px;
      display: flex;
      border: 0;
      align-items: center;
      padding: 3px 16px;
      justify-content: space-between;
      background-color: #f6f6f6;
      border-radius: 9999px;
      box-shadow: none;
    }
  }
}
</style>